<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>[Manage] ${model.listing.title}</title>

        <link rel="stylesheet" href="css/gmaps/default.css" type="text/css" />
        <link rel="stylesheet" href="css/token/token-input.css" type="text/css" />
        <link rel="stylesheet" href="css/token/token-input-facebook-2.css" type="text/css" />

        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
        </style>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
        <script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/token/jquery.tokeninput.js"></script>   
        <script type="text/javascript" src="js/page/geocoder.js"></script>  

        <%@ include file="include/listingMaps.jsp" %>
        
        <script type="text/javascript">            
            $(function() {
                try {
                    initialize();
                } 
                catch (e) {  alert(e) }
            });
        </script>   
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            <div style="width: 100%; text-align: left; font-family: Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1020px; margin-top: 10px; margin: 0 auto;">

                    <br><br>
                    
                    <span style="font-size: 30px; font-weight: bold;">&nbsp;[Manage] Listing View </span>  &nbsp; ( <a href="listing.htm?a=9004&id=${model.listing.id}" style="color:#369">Edit Info</a>&nbsp;|&nbsp;<a href="listing.htm?a=91003&id=${model.listing.id}" style="color:#369">Edit Photos</a>&nbsp;|&nbsp;<a href="listing.htm?a=9005&id=${model.listing.id}" style="color:#369">Delete Listing</a> )
                   

                    <table border="0" cellpadding="5" cellspacing="5" style="width: 1000px;">

                        <tr>
                            <td colspan="4">
                                <br>
                                <span style="font-size: 20px; font-weight: bold;">Basic Info</span>
                                <hr>
                                <table cellpadding="5" cellspacing="5">                                    
                                    <tr>
                                        <td>Status:</td>
                                        <td>
                                            ${model.listing.statusType.title}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Property Type:</td>
                                        <td>
                                            ${model.listing.propertyType.title}
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        
                        <!--
                        <tr>
                            <td width="150px">Posted As:</td>
                            <td>
                                ${model.listing.posterType.title}
                            </td>
                        </tr>
                        -->
                        
                        
                        <tr>
                            <td colspan="4">
                                <br>
                                <span style="font-size: 20px; font-weight: bold;">Location & Address</span>
                                <hr>
                            </td>
                        </tr>

                        <tr>
                            <td style="vertical-align: top" colspan="3">
                                <input id="address" type="text" name="address" style="width:400px; padding: 3px; display: none"/>
                                <table cellpadding="3" cellspacing="3">
                                    <tr>
                                        <td>Unit/House Number:</td>
                                        <td>
                                            ${model.listing.number}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Floor:</td>
                                        <td>
                                            ${model.listing.floor}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Building/Village Name:</td>
                                        <td>
                                            ${model.listing.structure}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Street:</td>
                                        <td>
                                            ${model.listing.street}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Zip:</td>
                                        <td>
                                            ${model.listing.zip}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>City:</td>
                                        <td>
                                            ${model.listing.city}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Region:</td>
                                        <td>
                                            ${model.listing.region}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Country:</td>
                                        <td>
                                            ${model.listing.country}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>Lat:</td>
                                        <td>${model.listing.lat}</td>
                                    </tr>
                                    <tr>
                                        <td>Lng:</td>
                                        <td>${model.listing.lng}</td>
                                    </tr> 
                                </table>
                            </td>
                            <td colspan="2">
                                <div id="map_canvas" style="width:400px; height:250px; position:relative; left:0%"></div>
                            </td>
                        </tr>            

                        <tr>
                            <td colspan="4">
                                <br>
                                <span style="font-size: 20px; font-weight: bold;">Property Details</span>
                                <hr>
                                <table cellpadding="5px" cellspacing="5px">
                                    <tr>
                                        <td>Furnishing:</td>
                                        <td>
                                            ${model.listing.furnishType.title}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Area:</td>
                                        <td>${model.listing.sqArea} Sqm.</td>
                                    </tr>
                                    <tr>
                                        <td>Bedrooms:</td>
                                        <td>
                                            ${model.listing.numBedrooms}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Bathrooms:</td>
                                        <td>
                                            ${model.listing.numBathrooms}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align: top;">Amenities:</td>
                                        <td style="vertical-align: top;">
                                            <c:forEach items="${model.listing.amenities}" var="amenity">
                                                ${amenity.title},&nbsp;
                                            </c:forEach>
                                        </td> 
                                    </tr>     
                                </table>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="4">
                                <br>
                                <span style="font-size: 20px; font-weight: bold;">Rate & Availability</span>
                                <hr>
                                
                                <table cellpadding="5px" cellspacing="5px">
                                    <tr>
                                        <td>Month Rate:</td>
                                        <td>&#8369; ${model.listing.monthRate} /Mo.</td>
                                    </tr> 
                                    <!--
                                    <tr>
                                        <td>Selling Price:</td>
                                        <td>&#8369; ${model.listing.sellingPrice}</td>
                                    </tr>  
                                    -->
                                    <tr>
                                        <td>Availability Date:</td>
                                        <td>
                                            <fmt:formatDate value="${model.listing.availabilityDate}" pattern="MM/dd/yyyy" />                    
                                        </td>          
                                    </tr>                                      
                                </table>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="4">
                                <br>
                                <span style="font-size: 20px; font-weight: bold;">Additional Info</span>
                                <hr>                                
                                <table cellpadding="5px" cellspacing="5px">
                                    <tr>
                                        <td>Title:</td>
                                        <td>${model.listing.title}</td>
                                    </tr>                        
                                    <tr>
                                        <td style="vertical-align: top;">Description:</td>
                                        <td style="vertical-align: top;">
                                            <textarea rows="5" cols="54" style="padding: 3px;" readonly="readonly">
                                                ${model.listing.description}
                                            </textarea>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                                                            
                        <tr>
                            <td colspan="4">
                                <span style="font-size: 20px; font-weight: bold;">Tags</span>
                                <hr>
                                <table cellpadding="5px" cellspacing="5px">                                    
                                    <tr>
                                        <td>Place Tags:</td>
                                        <td>
                                            <c:forEach items="${model.listing.places}" var="place">
                                                ${place.title}, 
                                            </c:forEach>                      
                                        </td>           
                                    </tr>   
                                </table>
                            </td>
                        </tr>
  

                        <tr>
                            <td colspan="4">
                                <br>
                                <span style="font-size: 20px; font-weight: bold;">Manager Fields</span>
                                <hr>
                                <table cellpadding="5px" cellspacing="5px">
                                    <tr>
                                        <td>Verified:</td>
                                        <td>
                                            ${model.listing.verified}                    
                                        </td>                       
                                    </tr>
                                    <tr>
                                        <td>Available:</td>
                                        <td>                    
                                            ${model.listing.available}
                                        </td>          
                                    </tr>
                                    <tr>
                                        <td>Posted:</td>
                                        <td>                    
                                            ${model.listing.posted}
                                        </td>          
                                    </tr>
                                    <tr>
                                        <td>Date Posted:</td>
                                        <td>                    
                                            <c:if test="${model.listing.posted}">
                                                <fmt:formatDate value="${model.listing.postDate}" pattern="MMMM dd, yyyy" />
                                            </c:if>
                                            <c:if test="${!model.listing.posted}">
                                                N/A
                                            </c:if>
                                        </td>          
                                    </tr>
                                    <tr>
                                        <td>Post Expiry Date:</td>
                                        <td>                    
                                            <c:if test="${model.listing.posted}">
                                                <fmt:formatDate value="${model.listing.expiryDate}" pattern="MMMM dd, yyyy" />
                                            </c:if>
                                            <c:if test="${!model.listing.posted}">
                                                N/A
                                            </c:if>  
                                        </td>          
                                    </tr>
                                    <tr>
                                        <td>Creator ID:</td>
                                        <td>
                                            <a href="user.htm?a=2&id=${model.listing.creatorID}" style="color: #369;">${model.listing.creator.firstName} ${model.listing.creator.lastName} </a>          
                                        </td>                       
                                    </tr>
                                </table> 
                            </td>
                        </tr>
                        
                    </table>

                    <br><br>

                </div>

                <br><br>                

            </div>

            <div>
                <img src="${model.props.appPath}/img/footer-foot.jpg" style="border: 0px solid black; display: block; width: 100%;" />
            </div>

        </div>

    </body>

</html>
